.container {
  padding: 4vw 4vw 0 4vw;
  overflow-y: auto;
  height: 100vh;
  .close {
    display: flex;
    justify-content: flex-end;
    padding: 1.33vw 0 4vw 0;
    svg {
      width: 4vw;
      height: 4vw;
      fill: #9ea1ae;
    }
  }
  .title {
    display: flex;
    align-items: center;
    padding-bottom: 5.33vw;
    h3 {
      font-size: 4.53vw;
      color: #333;
      padding-right: 2.67vw;
    }
    h4 {
      font-size: 3.47vw;
      color: #a5a6ab;
      flex: 1;
    }
    button {
      font-size: 3.47vw;
      color: #fc6627;
      padding: 0.5vw 3vw;
      &.active {
        border: none;
        color: #fff;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
        background-color: #fc6627;
      }
      &.activeColor {
        background-color: #fff;
        color: #fc6627;
        border: none;
        border: 1px solid #fc6627;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
      }
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    span {
      padding: 2vw 5.33vw;
      font-size: 3.73vw;
      color: #3a3948;
      background: #f7f8fa;
      white-space: nowrap;
      margin-bottom: 3.2vw;
      margin-right: 3.2vw;
      border-radius: 3vw;
      font-weight: 400;
      position: relative;
      &.active {
        color: #fc6627;
        font-weight: 500;
      }
      svg {
        width: 4vw;
        height: 4vw;
        position: absolute;
        right: -1vw;
        top: -1vw;
        fill: #c8c9cc;
      }
    }
  }
  .space {
    height: 5.33vw;
  }
}
